<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>盒子模型</title>
        <style>
            #d1 {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*margin-left: 100px;*/
                /*margin-top: 100px;*/
                /* margin-right: 100px;
                margin-bottom: 50px; */
                /* margin: 50px; */
                /* margin: 50px 100px; */
                /* margin: 10px 20px 30px 40px; */
                margin: 10px 50px 20px;
            }

            #d2 {
                margin-top: 100px;
                width: 100px;
                height: 100px;
                /*上下相信彼此添加外边距 取最大值*/
                border: 1px solid red;
            }
            #s1 {
                /*行内元素上下外边距无效*/
                margin-right: 100px;
            }
            #s2 {
                /* 左右相信彼此添加外边距  两者相加 */
                margin-left: 50px;
            }
            #big {
                width: 200px;
                height: 200px;
                background-color: green;
                /* 解决粘连问题 */
                overflow: hidden;
            }
            #big > div {
                width: 50px;
                height: 50px;
                background-color: red;
                margin-left: 50px;
                /* 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题 */
                margin-top: 50px;
            }
            #border_div {
                width: 200px;
                height: 200px;
                border: 10px solid blue;
                /* 设置圆角 */
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="border_div"></div>
        <div id="big">
            <div></div>
        </div>
        <span id="s1">sapn1</span><span id="s2">sapn2</span>
        <div id="d1">外边距测试</div>
        <div id="d2">div2</div>
    </body>
</html>
